/**
 * Created by GUO on 2017/5/22.
 * 生成html
 * @flow
 */

const defaultCss = `.hljs,
.hljs-subst {
  color: #444;
}

.hljs-comment {
  color: #888888;
}

.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
    color: #333;
}


/* User color: hue: 0 */

.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
  color: #880000;
}

.hljs-title,
.hljs-section {
  color: #880000;
}

.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #BC6060;
}


/* Language color: hue: 90; */

.hljs-literal {
  color: #78A960;
}

.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
  color: #397300;
}


/* Meta color: hue: 200 */

.hljs-meta {
  color: #1f7199;
}

.hljs-meta-string {
  color: #4d99bf;
}


`;
const tuiCoolCss = `.article_body {
    margin:0 auto;
    max-width:100%;
    min-height:400px;
    font: inherit;
    -webkit-transform: translate3d(0,0,0);
    font-family:"Microsoft YaHei","微软雅黑","Helvetica Neue";
    padding:10px;
    font-size:1.1em;
}

h1,h2,h3 {
    font-size:100%;
    padding-bottom:0px;
    text-indent:0em;
}

.article_body figure img {
    display:block; 
    margin:auto;
    clear:both;
}

.article_body figcaption {
    display:block; 
    margin:auto;
    text-align: center;
}

.no-text-indent {
    text-indent: 0em !important;
}

.code-pre {
    line-height: 1.5em;
    word-break: break-all;
    word-wrap: break-word;
    padding: .25em;
    margin: 0 0 .75em;
    border: 1px solid rgba(0,0,0,0.15);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color:#333;
    background-color:#f6f6f6;
}
.code-pre div {
    line-height: 1.4em !important;
}
.code-pre code{
    padding: 0em;
}

code {
  font-family: Menlo,Monaco,Consolas,Courier New,monospace;
  border:none;
  padding: 2px 4px;
}

.article_body object, .article_body embed, .article_body iframe{
    margin:0 auto;
    margin-bottom: 10px;
    display: block;
    width:320px;
    height:240px;
}

.article_body object, .article_body embed，.article_body table{
    vertical-align:middle;
    border:0;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    text-align:center;
    margin:0 auto;
    max-width:100%;
    height:auto;
}

.article_body img {
    vertical-align:middle;
    border:0;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    margin:0 auto;
    max-width:98%;
    height:auto;
}

.img_text_center {
    text-align: center;
    display: block;
}

.article_body a {
   font-style:italic;
   text-decoration:none;
}

.article_body textarea {
    width:100%;
    overflow-y:visible;
    height:100px;
}

blockquote {
    border-left: 3px solid #0aa284;
    padding-left: 6px;
    text-align:left;
    margin-left: 0px;
    margin-right: 0px;
    word-wrap: break-word;
    word-break: break-all;
}
.article_body table, .article_body tr, .article_body td, .article_body p, .article_body div, .article_body ol, .article_body ul, .article_body ul li, .article_body ol li, .article_body blockquote {
    text-justify: inter-ideograph;
    -webkit-text-align-last:justify;
    overflow:hidden;
    line-height:1.6;
}

.article_body table {
    width:98%;
    max-width:98%;
    margin-bottom:5px;
}

.article_body table, .article_body tr, .article_body td {
    line-height:1.4em;
}
.article_body ol{
    list-style-type:disc;
    padding-left:5px;
    margin-left: 5px;
}

.article_body ul {
    padding-left:0px;
    margin-left: 0px;
}

.article_body ul li {
  list-style-type: disc;
}

.article_body table pre {
    margin-bottom: 0px !important;
}

img.alignLeft,img.alignLeft0 {float:left;max-width:120px;margin:0 10px 5px 0;padding:2px;}

img.alignCenter {
    display:block;
    margin-bottom: 10px;
}
img.breakLine {
    display:block; 
    clear:both;
}

h1,h2,h3,h4,p {
    text-indent:0em;
    margin: 0 0 .55em;
}

pre {
  line-height:1.5em;
  word-wrap:break-word;
  word-break:break-all;
  width:98%;
  max-width:98%;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  -moz-tab-size: 0;
  -o-tab-size: 0;
  tab-size: 0;
  font-family: Menlo,Monaco,Consolas,Courier New,monospace;
  border:none;
  padding: 0.5em;
}

a.yangshi:link,a.yangshi:visited{      
   padding:7px 16px 5px 16px;
   text-decoration:none;
}

.hljs {
  display: block;
  overflow-x: auto;

}


.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
    font-weight: 700;
}



.hljs-title,
.hljs-section {
  font-weight: bold;
}


.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}
`;

type Body = {
    content: string,
    title: string,
    date: string,
    feedTitle: string,
};


function makeHtml (data: Body): string {
    return `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
     <style>
        html,body{padding: 0;margin: 0}
        .head{
            background-color: #0AA284;
            padding:0.5em;
            color: white;
            font-size: 1.3em;
            margin-bottom:0.5em;
            font-weight: bold;
        }
        .headDate{
            font-size: 0.7em;
            font-weight: normal;
            margin-top:0.7em;
            margin-bottom:0.7em;
            display:block;
        }
       ${defaultCss}
       ${tuiCoolCss}
    </style>
</head>
<body>
<div class="head">
${data.title}<br/>
    <span class="headDate">
        ${data.feedTitle}&nbsp;&nbsp;${data.date}
    </span>
</div>
<div class="article_body">
${data.content}
</div>
</body>
</html>`;
}

export default makeHtml;